<template>
  <div>
    <header-bar></header-bar>
    <loading v-if="isLoading"></loading>
    <div class="musicList">
      <ul>
        <li>
          <router-link class="mcLists" :to="{name:'MusicView',params:{mcid:music.id}}" v-for="music in musics" :key="music.id">
            <div class="mc-list">
              <div class="mcImg">
                <img :src="'https://images.weserv.nl/?url='+music.image" alt="" width="100" height="100">
              </div>
              <div class="mcTxt">
               <h3>{{music.title}}</h3>
                <rating v-if="music.rating" :rating="music.rating"></rating>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import HeaderBar from  './HeaderBar'
  import Loading from '../public/Loading'
  import Rating from '../public/Rating'
  export default {
    name: 'EuropeMusic',
    data(){
      return{
        isLoading:true,
        musics:[]
      }
    },
    components:{
      HeaderBar,
      Loading,
      Rating
    },
    created(){
      this.axios.get('api/music/search?q=欧美&count=15?apikey=0df993c66c0c636e29ecbb5344252a4a')
        .then((res)=>{
          this.isLoading = false
          let musics = res.data.musics
          // let attrs = musics[0].tags
          this.musics = musics
          console.log(attrs)
        })
        .catch((err)=>console.log(err))
    }
  }
</script>

<style lang="scss" >
  .musicList{
    margin-top: 47px;
    padding:15px;
    .mc-list{
      display: flex;
      align-items: center;
      .mcImg{
        flex: 1;
        text-align: center;
      }
      .mcTxt{
        padding-left: 10px;
        flex: 2;
        h3{
          padding: 0 0 5px;
          color: #494949;
          font-size: 18px;
          line-height: 24px;
          font-weight: bold;
        }
        .star-full {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url();
          background-size: cover;
        }

        .star-gray {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url();
          background-size: cover;
        }

        .star-half {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url();
          background-size: cover;
        }

        .average {
          padding-right: 8px;
          font-size: 13px;
        }
      }
    }
    .mcLists{
      display: block;
      padding: 20px 4%;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid #ccc;
    }
  }
</style>
